<%@ page import="com.bjfu.gmms.model.Mentor" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>导师信息</title>
  <style>
    /* 页面整体样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      color: #333;
      margin: 0;
      padding: 0;
    }

    h1 {
      text-align: center;
      color: #6a5acd;
      margin-top: 20px;
    }

    .mentor {
      margin: 15px 20px;
      padding: 10px;
      background-color: #e6e6fa;
      border: 1px solid #dcdcdc;
      border-radius: 8px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .details {
      margin-left: 20px;
      margin-top: 10px;
      display: none; /* 初始状态为隐藏 */
      background-color: #faf0ff;
      border: 1px solid #dcdcdc;
      border-radius: 5px;
      padding: 10px;
    }

    .toggle {
      cursor: pointer;
      color: #6a5acd;
      font-weight: bold;
      text-decoration: none;
    }

    .toggle:hover {
      color: #483d8b;
      text-decoration: underline;
    }
  </style>
  <script>
    // 折叠和展开逻辑
    function toggleDetails(id) {
      const details = document.getElementById("details-" + id);
      if (details.style.display === "none") {
        details.style.display = "block";
      } else {
        details.style.display = "none";
      }
    }
  </script>
</head>
<body>
<h1>导师信息列表</h1>

<%
  // 从请求作用域中获取导师列表
  List<com.bjfu.gmms.model.Mentor> mentors = (List<Mentor>) request.getAttribute("mentors");
  if (mentors != null && !mentors.isEmpty()) {
    for (com.bjfu.gmms.model.Mentor m : mentors) {
%>
<div class="mentor">
  <!-- 展示导师名字 -->
  <span class="toggle" onclick="toggleDetails('<%= m.getMentorId() %>')">
            <%= m.getMentorName() %>
        </span>
  <!-- 折叠部分 -->
  <div class="details" id="details-<%= m.getMentorId() %>">
    <p><strong>导师图片:</strong></p>
    <!-- 假设 mentor.getMentorImg() 返回的是图片的文件名，例如 "11.jpg" -->
    <img src="${pageContext.request.contextPath}/imgs/${mentor.mentorImg}" alt="导师图片" style="max-width: 150px; max-height: 150px; border-radius: 8px;">
    <p><strong>导师简介:</strong> <%= m.getMentorDetails() %></p>
    <p><strong>导师邮箱:</strong> <%= m.getMentorMail() %></p>
    <p><strong>导师联系方式:</strong> <%= m.getMentorPhone() %></p>
    <!-- 添加更多详细信息 -->
  </div>
</div>
<%
  }
} else {
%>
<p style="text-align:center; color: #6a5acd;">没有导师信息可供展示。</p>
<%
  }
%>

</body>
</html>